<template>
  <div class="signing-statistics">
    <div class="block">
      <span class="demonstration">选择时间段</span>
      <el-date-picker
        v-model="datetime"
        type="datetimerange"
        range-separator="~"
        start-placeholder="请选择开始时间"
        end-placeholder="请选择结束时间"
      />
    </div>
    <div class="choice">
      <span>机构</span>
      <el-select v-model="value1" class="m-2" placeholder="全部" size="large">
        <el-option
          v-for="item in options1"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
  <span>医生团队</span>
  <el-select v-model="value2" class="m-2" placeholder="请选择" size="large">
    <el-option
      v-for="item in options2"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    />
  </el-select>
  <span>医生</span>
  <el-select v-model="value3" class="m-2" placeholder="请选择" size="large">
    <el-option
      v-for="item in options3"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    />
  </el-select>
    </div>
    <div class="echarts">
    <div style="width: 100%; height: 300px;" ref="chartRef"></div>
    <div class="bottm">
      <el-button plain @click="open1"> 导出 </el-button>
    </div>
    <el-table :data="tableData" height="250" style="width: 100%">
      <el-table-column prop="date" label="日期" width="570" />
      <el-table-column prop="whole" label="服务量" width="790" />
      <!-- <el-table-column prop="First" label="首次签约" width="310"/>
      <el-table-column prop="Renewal" label="续约" width="270"/> -->
    </el-table>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
export default {
  name: 'SigningStatistics',
   data(){
    return{
      datetime:[],
         tableData:[
  {
    date: '2021-01-04',
    whole: '105',
    // First: '92',
    // Renewal: '9',
  },
  {
    date: '2021-01-05',
    whole: '100',
    // First: '92',
    // Renewal: '9',
  },
  {
    date: '2021-01-06',
    whole: '100',
    // First: '92',
    // Renewal: '9',
  },
  {
    date: '2021-01-07',
    whole: '109',
    // First: '92',
    // Renewal: '9',
  },
  {
    date: '2021-01-08',
    whole: '103',
    // First: '92',
    // Renewal: '9',
  },
  {
    date: '2021-01-09',
    whole: '110',
    // First: '92',
    // Renewal: '9',
  },
  {
    date: '2021-01-10',
    whole: '100',
    // First: '92',
    // Renewal: '9',
  },
  {
    date: '合计',
    whole: '727',
    // First: '744',
    // Renewal: '63',
  },
],
  options1: [
    {
      value: '罗西社区服务中心',
      label: '罗西社区服务中心',
    },
    {
      value: 'Option2',
      label: '天明社区服务中心',
    },
    {
      value: 'Option3',
      label: '民进社区服务中心',
    },
    {
      value: 'Option4',
      label: '大河社区服务中心',
    },
  ],
  options2: [
    {
      value: '王浩团队',
      label: '王浩团队',
    },
    {
      value: '李明明团队',
      label: '李明明团队',
    },
    {
      value: '李伟团队',
      label: '李伟团队',
    },
    {
      value: '罗翔团队',
      label: '罗翔团队',
    },
  ],
  options3: [
    {
      value: '王浩医生',
      label: '王浩医生',
    },
    {
      value: '李明明医生',
      label: '李明明医生',
    },
    {
      value: '李伟医生',
      label: '李伟医生',
    },
    {
      value: '罗翔医生',
      label: '罗翔医生',
    },
    {
      value: '张宇医生',
      label: '张宇医生',
    },
    {
      value: '罗曼玉医生',
      label: '罗曼玉医生',
    },
  ],
  value1: '',
  value2: '',
  value3: ''
}
  },
  methods: {
    open1(){
      alert('导出成功')
    }
  },
  mounted() {
    var app = {};

var myChart = echarts.init(this.$refs.chartRef);
var option;
option = {
  title: {
    text: '服务量'
  },
  legend: {},
  tooltip: {},
  dataset: {
    dimensions: ['product', '服务量', ],
    source: [
      { product: '1/4', 服务量: 160, },
      { product: '1/5', 服务量: 140, },
      { product: '1/6', 服务量: 120, },
      { product: '1/7', 服务量: 109, },
      { product: '1/8', 服务量: 110, },
      { product: '1/9', 服务量: 130, },
      { product: '1/10',服务量: 119, },
    ]
  },
  xAxis: { type: 'category' },
  yAxis: {},
  // Declare several bar series, each will be mapped
  // to a column of dataset.source by default.
  series: [{ type: 'bar' }, ]
};

option && myChart.setOption(option);
  },
}
</script>

<style lang="less" scoped>
.echarts{
  width: 100%;
  height: 300px;
  margin-top: 20px;
  border: 1px solid white;
  margin-bottom: 30px;
  .box1{
    border: 1px solid black;
    float: left;
    margin-right: 15px;
  }
}
.echarts:hover{
			box-shadow: 0px 15px 30px rgba(0, 0, 0, 0.4);
}
.choice{
  margin-top: 30px;
}
span{
  margin-left: 20px;
  margin-right: 20px;
}
.bottm{
  margin-top: 30px;
  margin-bottom: 20px;
  margin-left: 1050px;
  :hover{
    color: blue;
    border: 1px solid blue;
  }
}
button{
  width: 90px;
  height: 50px;
  border: 1px solid white;
}
</style>
